<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta th:name="_csrf" th:content="${_csrf.token}"/>
		<!-- 默认的header name是X-CSRF-TOKEN -->
		<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
		<title></title>
		<script th:src="@{/assets/js/jquery.min.js}"></script>
		<link rel="stylesheet" th:href="@{/component/pear/css/pear.css}"/>

<!--		jquery 标签输入框插件-->
		<link th:href="@{/back/plugins/tagsinput/jquery.tagsinput.css}" rel="stylesheet"/>
		<style>
			h1{
				margin-top: 200px;
				color: #5FB878;
			}
			.layui-card-body{
				height: 150px;
			}
			#btns{
				width: 360px;
				height: 38px;
				margin-left: 900px;
			}
		</style>
	</head>
	<body class="pear-container">
	<div class="layui-row layui-col-space10">
		<form method="post" th:action="@{${url}}" id="global-form">
		<div class="layui-col-md12">

			<div class="layui-card">
				<div class="layui-card-body">
					<input type="hidden" name="editArticleId" id="editArticleId">
					<span style="color: green;font-size: 22px" th:text="${ps}"></span>
					<br/>
					标题：<br/>
					<input id="title" name="title" class="layui-input" type="text" style="width: 40%" required>
					标签：<br/>
					<input class="layui-input" name="tags" type="text" id="tags" style="width: 40%" required>
				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header"><span style="color: green;font-size: 15px;">文章编辑器</span></div>
				<div class="layui-card-body">
					<textarea name="ct" id="edit" cols="30" rows="10" required></textarea>
					<div id="btns">

						<div class="layui-btn-group layui-btn-primary" style="margin-top: 10px">
							<button lay-submit lay-filter="submit03" class="layui-btn layui-btn-radius" target="_blank">返回列表</button>
						</div>
						<div th:if="${ps} ne '修改文章'" class="layui-btn-group" style="margin-top: 10px">
							<button lay-submit lay-filter="submit02" class="layui-btn layui-btn-warm layui-btn-radius" target="_blank">放入草稿</button>
						</div>
						<div class="layui-btn-group" style="margin-top: 10px">
							<button  lay-submit lay-filter="submit01" class="layui-btn layui-btn-radius" target="_blank" th:text="${ps}"></button>
						</div>
					</div>

				</div>
			</div>
		</div>
		</form>

	</div>
	<script th:src="@{/component/pear/module/tinymce/tinymce.js}"></script>
	<script th:src="@{/back/plugins/tagsinput/jquery.tagsinput.min.js}"></script>
	<script th:src="@{/component/layui/layui.js}"></script>
	<script th:src="@{/component/pear/pear.js}"></script>
	<script th:inline="javascript">
		var myedit=null;
		// 获取<meta>标签中封装的_csrf信息 ,否则会请求403
		var token = $("meta[name='_csrf']").attr("content");
		var header = $("meta[name='_csrf_header']").attr("content");
		var headers = {"X-CSRF-TOKEN": token}

		layui.use(['tinymce'], function() {
			var tinymce = layui.tinymce
			var edit = tinymce.render({
				elem: "#edit",
				height: 400
			});
			myedit=edit;
		});


		// Tags Input
		$('#tags').tagsInput({
			width: '39%',
			height: '35px',
			defaultText: '请输入文章标签',
			interactive:true,
			removeWithBackspace : true
		});

		$('#tags_tag').css('width','90.4px');



		setTimeout(() => {
			//编辑文章的数据填充
			var articleContent=[[${contents}]];
			if(articleContent!=null){
				$('#editArticleId').val(articleContent.id);
				$('#title').val(articleContent.title);
				$('#tags').importTags(articleContent.tags);
				tinymce.activeEditor.setContent(articleContent.content);
			}
		}, 850);


		setTimeout(() => {


			layui.use('form', function(){
				var form = layui.form;

				if($('#editArticleId').val().length==0) {
					form.on('submit(submit01)', function (data) {
						layer.confirm('您确定要发布吗?', {
							icon: 3,
							title: '提示'
						}, function (index) {
							layer.close(index);
							let loading = layer.load();
							var data = $.param({
								"content" : myedit.getContent()
							}) + "&" +$('#global-form').serialize();
							$.ajax({
								url: "/pear/article/publish",
								data: data,  //ajax提交表单
								dataType: 'json',
								type: 'POST',
								headers: headers,
								async:false,
								success: function (result) {
									layer.close(loading);
									if (result.success) {
										layer.msg(result.msg, {
											icon: 1,
											time: 1000
										});
									} else {
										layer.msg(result.msg, {
											icon: 2,
											time: 1000
										});
									}
								}
							})
						})
						return false;
					});

					form.on('submit(submit03)', function (data) {
						window.location.href='/pear/toArticleManager'
					});


				}else {
					form.on('submit(submit01)', function (data) {
						layer.confirm('您确定要修改吗?', {
							icon: 3,
							title: '提示'
						}, function (index) {
							layer.close(index);
							var data = $.param({
								"content" : myedit.getContent()
							}) + "&" +$('#global-form').serialize();

							let loading = layer.load();
							$.ajax({
								url: "/pear/modifyArticle",
								data: data,  //ajax提交表单
								dataType: 'json',
								type: 'POST',
								headers: headers,
								async:false,
								success: function (result) {
									layer.close(loading);
									if (result.success) {
										layer.msg(result.msg, {
											icon: 1,
											time: 1000
										});
									} else {
										layer.msg(result.msg, {
											icon: 2,
											time: 1000
										});
									}
								}
							})
						})
						return false;
					});

					form.on('submit(submit03)', function (data) {
						window.history.go(-1);  //返回上一页
					});

				}

				form.on('submit(submit02)', function (data) {
					layer.confirm('您确定要放入草稿箱吗?', {
						icon: 3,
						title: '提示'
					}, function (index) {
						layer.close(index);
						var data = $.param({
							"content" : myedit.getContent()
						}) + "&" +$('#global-form').serialize();

						let loading = layer.load();
						$.ajax({
							url: "/pear/add/draft",
							data: data,  //ajax提交表单
							dataType: 'json',
							type: 'POST',
							headers: headers,
							async:false,
							success: function (result) {
								layer.close(loading);
								if (result.success) {
									layer.msg(result.msg, {
										icon: 1,
										time: 1000
									});
									window.location.href='/pear/toDraft'
								} else {
									layer.msg(result.msg, {
										icon: 2,
										time: 1000
									});
								}
							}
						})
					})
					return false;
				});


			});


		}, 900);







	</script>
	</body>




</html>
